<template>
    <div class="count">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon
            scroll-to-error>
            <div class="box">
                <div class="box-header">
                    <h4> <i class="iconfont icon-zuojiantou" @click="goBack"></i> 核算数据</h4>
                    <!-- 表格 -->
                    <TableCom :boder="true" :dataTable="dataTable" @createTable="createTable" @deleteRow="deleteRow"
                        @excelTable="excelTable" :uploadeExls="true" />
                    <div class="totalList">
                        <el-form-item class="flexRowLable" prop="moneyAll">
                            <p class="LeftLable">总金额</p>
                            <el-input v-model="ruleForm.moneyAll" />
                            <p class="unit">元</p>
                        </el-form-item>
                        <el-form-item class="flexRowLable" prop="moneyMaterials">
                            <p class="LeftLable">总材料费</p>
                            <el-input v-model="ruleForm.moneyMaterials" />
                            <p class="unit">元</p>
                        </el-form-item>
                        <el-form-item class="flexRowLable" prop="moneyInstall">
                            <p class="LeftLable">总安装费</p>
                            <el-input v-model="ruleForm.moneyInstall" />
                            <p class="unit">元</p>
                        </el-form-item>
                        <el-form-item class="flexRowLable" prop="moneyCity">
                            <p class="LeftLable">总城管费</p>
                            <el-input v-model="ruleForm.moneyCity" />
                            <p class="unit">元</p>
                        </el-form-item>
                    </div>
                    <el-form-item class="remarks" prop="moneyCity">
                            <p class="LeftLable">备注</p>
                            <el-input v-model="ruleForm.remarks" placeholder="请输入备注" />
                        </el-form-item>
                </div>
                <div class="countResults">
                    <h4>
                        核算结果
                    </h4>
                    <div class="results">
                        <div class="list">
                            <p class="lable">毛利率</p>
                            <p class="value"><i
                                    :class="moneyGross >= 0 ? 'iconfont icon-shangsheng' : 'iconfont icon-xiajiang'"></i><span>{{
                                        moneyGross }}%</span>
                            </p>
                        </div>
                        <div class="list">
                            <p class="lable">利润率</p>
                            <p class="value"><i
                                    :class="moneyRatio >= 0 ? 'iconfont icon-shangsheng' : 'iconfont icon-xiajiang'"></i><span>{{
                                        moneyRatio }}%</span></p>
                        </div>
                        <div class="list">
                            <p class="lable">净利润</p>
                            <p class="value"><i
                                    :class="moneyProfit >= 0 ? 'iconfont icon-shangsheng' : 'iconfont icon-xiajiang'"></i><span>{{
                                        moneyProfit }}</span></p>
                        </div>
                    </div>
                </div>
                <div class="structuralDiagram">
                    <div class="title">
                        <h4>现场平面结构图</h4>
                        <span>需注明具体材质与尺寸</span>
                    </div>
                    <div class="form-box">
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-if="optionModel == '固定-单片'">
                            <el-input v-model="ruleForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '固定-单片'">
                            <el-input v-model="ruleForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="ruleForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="ruleForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="ruleForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="ruleForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="ruleForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="ruleForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="ruleForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="ruleForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="ruleForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="ruleForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.columnThreeHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="ruleForm.columnThreeWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.columnTwoHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="ruleForm.columnTwoWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>


                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗玻璃高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.windowHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗玻璃宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.windowWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗上宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.windowTopWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗上高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.windowTopHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗左宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.windowLeftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗左高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.windowLeftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗右宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.windowRightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗右高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.windowRightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗下宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.windowBottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗下高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.windowBottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.columnTwoHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.columnTwoWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.columnThreeHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="ruleForm.columnThreeWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnTwoHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnTwoWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnThreeHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnThreeWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱四高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnFourHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱四宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnFourWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱五高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnFiveHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱五宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnFiveWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱六高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnSixHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱六宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="ruleForm.columnSixWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <div class="optionModel">

                            <el-form-item label="选取模板" class="config">
                                <el-select v-model="optionModel" disabled>
                                    <el-option v-for="item in optionModelList" :key="item.id" :label="item.imageName"
                                        :value="item.imageName" />
                                </el-select>
                            </el-form-item>

                            <div class="modleimage">
                                <el-image :src="optionModelUrl" lazy />
                                <!-- 固定 1 -->
                                <!-- 选择1固定图片的正面数据宽度 -->
                                <div v-show="optionModel == '固定-单片'">
                                    <span class="guding-one-zhengmianW">{{ ruleForm.frontWidth }}</span>
                                    <!-- 选择1固定图片的正面数据高度 -->
                                    <span class="guding-one-zhengmianH">{{ ruleForm.frontHeight }}</span>
                                </div>

                                <!-- 固定 2-->
                                <div v-show="optionModel == '固定-四周厚度无包柱'">
                                    <span class="guding-two-fangshuiW">{{ ruleForm.waterproofWidth }}</span>
                                    <span class="guding-two-fangshuiH">{{ ruleForm.waterproofHeight }}</span>
                                    <span class="guding-two-zuoceW">{{ ruleForm.leftWidth }}</span>
                                    <span class="guding-two-zuoceH">{{ ruleForm.leftHeight }}</span>
                                    <span class="guding-two-zhengmianW">{{ ruleForm.frontWidth }}</span>
                                    <span class="guding-two-zhengmianH">{{ ruleForm.frontHeight }}</span>
                                    <span class="guding-two-youceW">{{ ruleForm.rightWidth }}</span>
                                    <span class="guding-two-youceH">{{ ruleForm.rightHeight }}</span>
                                    <span class="guding-two-xiaceW">{{ ruleForm.bottomWidth }}</span>
                                    <span class="guding-two-xiaceH">{{ ruleForm.bottomHeight }}</span>
                                </div>

                                <!-- 固定-3 -->
                                <div v-show="optionModel == '固定-四周厚度+两个包柱'">
                                    <span class="guding-three-fangshuiW">{{ ruleForm.waterproofWidth }}</span>
                                    <span class="guding-three-fangshuiH">{{ ruleForm.waterproofHeight }}</span>
                                    <span class="guding-three-zhengmianW">{{ ruleForm.frontWidth }}</span>
                                    <span class="guding-three-zhengmianH">{{ ruleForm.frontHeight }}</span>
                                    <span class="guding-three-zuoceH">{{ ruleForm.leftHeight }}</span>
                                    <span class="guding-three-zuoceW">{{ ruleForm.leftWidth }}</span>
                                    <span class="guding-three-youceW">{{ ruleForm.rightWidth }}</span>
                                    <span class="guding-three-youceH">{{ ruleForm.rightHeight }}</span>
                                    <span class="guding-three-xiadiH">{{ ruleForm.bottomHeight }}</span>
                                    <span class="guding-three-xiadiW">{{ ruleForm.bottomWidth }}</span>
                                    <span class="guding-three-menmeiW">{{ ruleForm.doorWidth }}</span>
                                    <span class="guding-three-menmeiH">{{ ruleForm.doorHeight }}</span>
                                    <span class="guding-three-baozhuH">{{ ruleForm.columnOneHeight }}</span>
                                    <span class="guding-three-baozhuW">{{ ruleForm.columnOneWidth }}</span>
                                    <span class="guding-three-baozhu2W">{{ ruleForm.columnThreeWidth }}</span>
                                    <span class="guding-three-baozhu2H">{{ ruleForm.columnThreeHeight }}</span>
                                </div>

                                <!-- 多选-4 -->
                                <div v-if="optionModel == '多选-门头含包柱'">
                                    <span class="duoxuan-four-fangshuiW">{{ ruleForm.waterproofWidth }}</span>
                                    <span class="duoxuan-four-fangshuiH">{{ ruleForm.waterproofHeight }}</span>
                                    <span class="duoxuan-four-zhengmianW">{{ ruleForm.frontWidth }}</span>
                                    <span class="duoxuan-four-zhengmianH">{{ ruleForm.frontHeight }}</span>
                                    <span class="duoxuan-four-zuoceH">{{ ruleForm.leftHeight }}</span>
                                    <span class="duoxuan-four-zuoceW">{{ ruleForm.leftWidth }}</span>
                                    <span class="duoxuan-four-youceW">{{ ruleForm.rightWidth }}</span>
                                    <span class="duoxuan-four-youceH">{{ ruleForm.rightHeight }}</span>
                                    <span class="duoxuan-four-xiadiH">{{ ruleForm.bottomHeight }}</span>
                                    <span class="duoxuan-four-xiadiW">{{ ruleForm.bottomWidth }}</span>
                                    <span class="duoxuan-four-menmeiW">{{ ruleForm.doorWidth }}</span>
                                    <span class="duoxuan-four-menmeiH">{{ ruleForm.doorHeight }}</span>
                                    <span class="duoxuan-four-baozhuH">{{ ruleForm.columnOneHeight }}</span>
                                    <span class="duoxuan-four-baozhuW">{{ ruleForm.columnOneWidth }}</span>
                                    <span class="duoxuan-four-baozhu2W">{{ ruleForm.columnTwoWidth }}</span>
                                    <span class="duoxuan-four-baozhu2H">{{ ruleForm.columnTwoHeight }}</span>
                                </div>

                                <!-- 多选-5 -->
                                <div v-else-if="optionModel == '多选-门头含橱窗'">
                                    <span class="duoxuan-five-fangshuiW">{{ ruleForm.waterproofWidth }}</span>
                                    <span class="duoxuan-five-fangshuiH">{{ ruleForm.waterproofHeight }}</span>
                                    <span class="duoxuan-five-zhengmianW">{{ ruleForm.frontWidth }}</span>
                                    <span class="duoxuan-five-zhengmianH">{{ ruleForm.frontHeight }}</span>
                                    <span class="duoxuan-five-zuoceW">{{ ruleForm.leftWidth }}</span>
                                    <span class="duoxuan-five-zuoceH">{{ ruleForm.leftHeight }}</span>
                                    <span class="duoxuan-five-youceW">{{ ruleForm.rightWidth }}</span>
                                    <span class="duoxuan-five-youceH">{{ ruleForm.rightHeight }}</span>
                                    <span class="duoxuan-five-xiadiW">{{ ruleForm.bottomWidth }}</span>
                                    <span class="duoxuan-five-xiadiH">{{ ruleForm.bottomHeight }}</span>
                                    <span class="duoxuan-five-menmeiW">{{ ruleForm.doorWidth }}</span>
                                    <span class="duoxuan-five-menmeiH">{{ ruleForm.doorHeight }}</span>
                                    <span class="duoxuan-five-baozhuW">{{ ruleForm.columnOneWidth }}</span>
                                    <span class="duoxuan-five-baozhuH">{{ ruleForm.columnOneHeight }}</span>
                                    <span class="duoxuan-five-baozhu3W">{{ ruleForm.columnThreeWidth }}</span>
                                    <span class="duoxuan-five-baozhu3H">{{ ruleForm.columnThreeHeight }}</span>
                                    <span class="duoxuan-five-baozhu2W">{{ ruleForm.columnTwoWidth }}</span>
                                    <span class="duoxuan-five-baozhu2H">{{ ruleForm.columnTwoHeight }}</span>

                                    <span class="duoxuan-five-chuchuangT-W">{{ ruleForm.windowTopWidth }}</span>
                                    <span class="duoxuan-five-chuchuangT-H">{{ ruleForm.windowTopHeight }}</span>
                                    <span class="duoxuan-five-chuchuangL-W">{{ ruleForm.windowLeftWidth }}</span>
                                    <span class="duoxuan-five-chuchuangL-H">{{ ruleForm.windowLeftHeight }}</span>
                                    <span class="duoxuan-five-chuchuangR-W">{{ ruleForm.windowRightWidth }}</span>
                                    <span class="duoxuan-five-chuchuangR-H">{{ ruleForm.windowRightHeight }}</span>
                                    <span class="duoxuan-five-chuchuangboli-W">{{ ruleForm.windowWidth }}</span>
                                    <span class="duoxuan-five-chuchuangboli-H">{{ ruleForm.windowHeight }}</span>
                                    <span class="duoxuan-five-chuchuangb-W">{{ ruleForm.windowBottomWidth }}</span>
                                    <span class="duoxuan-five-chuchuangb-H">{{ ruleForm.windowBottomHeight }}</span>
                                </div>

                                <!-- 多选-6 -->
                                <div v-else-if="optionModel == '多选-多间门头'">
                                    <span class="duoxuan-six-fangshuiW">{{ ruleForm.waterproofWidth }}</span>
                                    <span class="duoxuan-six-fangshuiH">{{ ruleForm.waterproofHeight }}</span>
                                    <span class="duoxuan-six-zuoceW">{{ ruleForm.leftWidth }}</span>
                                    <span class="duoxuan-six-zuoceH">{{ ruleForm.leftHeight }}</span>
                                    <span class="duoxuan-six-yuoceW">{{ ruleForm.rightWidth }}</span>
                                    <span class="duoxuan-six-yuoceH">{{ ruleForm.rightHeight }}</span>
                                    <span class="duoxuan-six-zhengmianW">{{ ruleForm.frontWidth }}</span>
                                    <span class="duoxuan-six-zhengmianH">{{ ruleForm.frontHeight }}</span>
                                    <span class="duoxuan-six-xiadiW">{{ ruleForm.bottomWidth }}</span>
                                    <span class="duoxuan-six-xiadiH">{{ ruleForm.bottomHeight }}</span>
                                    <span class="duoxuan-six-menmeiW">{{ ruleForm.doorWidth }}</span>
                                    <span class="duoxuan-six-menmeiH">{{ ruleForm.doorHeight }}</span>
                                    <span class="duoxuan-six-baozhu1W">{{ ruleForm.columnOneWidth }}</span>
                                    <span class="duoxuan-six-baozhu1H">{{ ruleForm.columnOneHeight }}</span>
                                    <span class="duoxuan-six-baozhu2W">{{ ruleForm.columnTwoWidth }}</span>
                                    <span class="duoxuan-six-baozhu2H">{{ ruleForm.columnTwoHeight }}</span>
                                    <span class="duoxuan-six-baozhu3W">{{ ruleForm.columnThreeWidth }}</span>
                                    <span class="duoxuan-six-baozhu3H">{{ ruleForm.columnThreeHeight }}</span>
                                    <span class="duoxuan-six-baozhu4W">{{ ruleForm.columnFourWidth }}</span>
                                    <span class="duoxuan-six-baozhu4H">{{ ruleForm.columnFourHeight }}</span>
                                    <span class="duoxuan-six-baozhu5W">{{ ruleForm.columnFiveWidth }}</span>
                                    <span class="duoxuan-six-baozhu5H">{{ ruleForm.columnFiveHeight }}</span>
                                    <span class="duoxuan-six-baozhu6W">{{ ruleForm.columnSixWidth }}</span>
                                    <span class="duoxuan-six-baozhu6H">{{ ruleForm.columnSixHeight }}</span>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <el-form-item class="btn-box">
                <el-button @click="resetForm(ruleFormRef)" style="background:#F2F3F5" v-show="props.isReset">重置</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)"
                    v-show="checkPermi(['system:measurement:edit']) && flagAddEdit">
                    {{ flagAddEdit ? '关联到新工单' : '保存' }}
                </el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import TableCom from '@/components/table/common'
import { costingAdd, costingListEdit, costingListGetInfo } from '@/api/costSum'
import { useRouter } from 'vue-router'
import { checkPermi } from "@/utils/permission.js";
import { dataTableStore } from '@/store/modules/dataTable.js'

const tableStore = dataTableStore()

const router = useRouter()
const { proxy } = getCurrentInstance();

const emit = defineEmits(['goBack'])
const props = defineProps({
    isReset: {
        type: Boolean,
        default: true
    },
    accounting: {
        type: Object,
        default: null
    },
    countAccounting: {
        type: Object,
        default: null
    },
})
const ruleFormRef = ref(null)

let flagAddEdit = ref(null)
// 毛利率
let moneyGross = ref(0)
// 利润率
let moneyRatio = ref(0)
// 净利润
let moneyProfit = ref(0)

let ruleForm = reactive({
    moneyAll: 0,
    moneyMaterials: 0,
    moneyInstall: 0,
    moneyCity: 0,
    remarks:'',





    waterproofHeight: '',
    waterproofWidth: '',
    leftHeight: '',
    leftWidth: '',
    windowHeight: '',
    windowWidth: '',
    windowTopWidth: '',
    windowTopHeight: '',
    windowLeftWidth: '',
    windowLeftHeight: '',
    windowRightWidth: '',
    windowRightHeight: '',
    windowBottomWidth: '',
    windowBottomHeight: '',
    rightHeight: '',
    rightWidth: '',
    frontHeight: '',
    frontWidth: '',
    bottomHeight: '',
    bottomWidth: '',
    doorHeight: '',
    doorWidth: '',
    columnOneHeight: '',
    columnOneWidth: '',
    columnTwoHeight: '',
    columnTwoWidth: '',
    columnThreeHeight: '',
    columnThreeWidth: '',
    columnFourHeight: '',
    columnFourWidth: '',
    columnFiveHeight: '',
    columnFiveWidth: '',
    columnSixHeight: '',
    columnSixWidth: '',

    materialImage: '',
}
)
const rules = reactive({

})

// 给数据赋值循环使用
let modleListName = ['waterproofHeight', 'windowTopWidth', 'windowTopHeight', 'windowLeftWidth', 'windowLeftHeight', 'windowRightWidth', 'windowRightHeight', 'windowBottomWidth', 'windowBottomHeight', 'waterproofWidth', 'windowHeight', 'windowWidth', 'leftHeight', 'leftWidth', 'windowTopDistance', 'frontHeight', 'frontWidth', 'bottomHeight',
    'windowBottomDistance', 'rightHeight', 'rightWidth', 'windowLeftDistance', 'windowRightDistance', 'bottomWidth', 'doorHeight', 'doorWidth', 'columnOneHeight', 'columnOneWidth', 'columnTwoHeight',
    'columnTwoWidth', 'columnThreeHeight', 'columnThreeWidth', 'columnFourHeight', 'columnFourWidth', 'columnFiveHeight', 'columnFiveWidth', 'columnSixHeight', 'columnSixWidth']
// 模板名称 modelName
let optionModel = ref('固定-单片')
let optionModelUrl = ref(new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href)
let optionModelList = reactive([
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href,
        imageName: '固定-单片',
        id: '固定-单片'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/2.[w173.92cm×h58.66cm].png', import.meta.url).href,
        imageName: '固定-四周厚度无包柱',
        id: '固定-四周厚度无包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/3.[w165.51cm×h128.03cm].png', import.meta.url).href,
        imageName: '固定-四周厚度+两个包柱',
        id: '固定-四周厚度+两个包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/4.[w167.80cm×h130.18cm].png', import.meta.url).href,
        imageName: '多选-门头含包柱',
        id: '多选-门头含包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/5.[w167.80cm×h130.37cm].png', import.meta.url).href,
        imageName: '多选-门头含橱窗',
        id: '多选-门头含橱窗'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/6.[w167.80cm×h130.18cm].png', import.meta.url).href,
        imageName: '多选-多间门头',
        id: '多选-多间门头'
    },
])
// 表格数据
let dataTable = ref([
    {
        businessType: null,   //业务类型
        productId: null,    // 存货名称
        productionContent: null,       // 制作内容
        width: null,     // 宽
        height: null,     // 高
        quantityPerPiece: null,     // 件数
        totalQuantity: null,          // 数量
        unit: null,           //单位
        salePrice: null,         // 销售单价
        amount: null,          //  销售金额
        price: 0,            // 成本单价
        salePriceAll: null,         // 成本金额
        prepayment: 0,        // 预收款
        materialFee: null,  //  材料费
        outsourcingId: null,   //外协商
        costCategory: null,       // 成本类型
        budgetCost: 0,         // 预算成本
        actualCost: null,         // 实际成本
    },
    {
        businessType: null,   //业务类型
        productId: null,    // 存货名称
        productionContent: null,       // 制作内容
        width: null,     // 宽
        height: null,     // 高
        quantityPerPiece: null,     // 件数
        totalQuantity: null,          // 数量
        unit: null,           //单位
        salePrice: null,         // 销售单价
        amount: null,          //  销售金额
        price: 0,            // 成本单价
        salePriceAll: null,         // 成本金额
        prepayment: 0,        // 预收款
        materialFee: null,  //  材料费
        outsourcingId: null,   //外协商
        costCategory: null,       // 成本类型
        budgetCost: 0,         // 预算成本
        actualCost: null,         // 实际成本
    },
    {
        businessType: null,   //业务类型
        productId: null,    // 存货名称
        productionContent: null,       // 制作内容
        width: null,     // 宽
        height: null,     // 高
        quantityPerPiece: null,     // 件数
        totalQuantity: null,          // 数量
        unit: null,           //单位
        salePrice: null,         // 销售单价
        amount: null,          //  销售金额
        price: 0,            // 成本单价
        salePriceAll: null,         // 成本金额
        prepayment: 0,        // 预收款
        materialFee: null,  //  材料费
        outsourcingId: null,   //外协商
        costCategory: null,       // 成本类型
        budgetCost: 0,         // 预算成本
        actualCost: null,         // 实际成本
    },
])

// 创建一行表格
const createTable = (data) => {
    dataTable.value.push(data)
}
// 导入的表格数据
const excelTable = (data) => {
    data.forEach(v => {
        dataTable.value.push(v)
    })
}
// 删除一行表格
const deleteRow = (v) => {
    dataTable.value.splice(v.$index, 1)
}

// 监听模板图片
watch(() => optionModel.value, (val) => {
    switch (val) {
        case '固定-单片':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href

            break;
        case '固定-四周厚度无包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/2.[w173.92cm×h58.66cm].png', import.meta.url).href

            break;
        case '固定-四周厚度+两个包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/3.[w165.51cm×h128.03cm].png', import.meta.url).href

            break;
        case '多选-门头含包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/4.[w167.80cm×h130.18cm].png', import.meta.url).href

            break;
        case '多选-门头含橱窗':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/5.[w167.80cm×h130.37cm].png', import.meta.url).href

            break;
        case '多选-多间门头':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/6.[w167.80cm×h130.18cm].png', import.meta.url).href

            break;

        default:
            break;
    }
})

// 计算材料安装城管费
const stopWatch = watch(
    () => dataTable.value.map(v => ({
      unit: v.unit,
      width: v.width,
      height: v.height,
      quantityPerPiece: v.quantityPerPiece,
      price: v.price,
      salePrice: v.salePrice,
      materialFee: v.materialFee,
      totalQuantity: v.totalQuantity
    })),
    (val) => {
      // 材料费
      let materials = 0;
      // 总材料费
      let salePriceAllCopy = 0;

      val.forEach((v, index) => {
        const item = dataTable.value[index]; // 获取原始数据
        if (item.unit === '平方米' || item.unit === '平方') {
          // 数量
          item.totalQuantity = (Number(v.width) * Number(v.height) * Number(v.quantityPerPiece));
        }
        if (v.unit == '个' || v.unit == '套' || v.unit == '张' || v.unit == '份' || v.unit == '项' || v.unit == '包') {
            if (!Number.isInteger(Number(v.totalQuantity))) {
                v.classErrorBorder = true
            }
        } else {
            v.classErrorBorder = false
        }
        // 面积
        // 销售金额
        item.amount = Number(Number((item.totalQuantity * v.salePrice)).toFixed(2));
        // 成本金额
        item.salePriceAll = Number(Number((item.totalQuantity * v.price)).toFixed(2));
        salePriceAllCopy += item.salePriceAll;

        // 预算成本
        item.budgetCost = Number((Number(v.materialFee) + Number(item.salePriceAll)).toFixed(2));

        // 汇总
        materials += Number(Number(v.materialFee).toFixed(2));
        // moneyAll += Number(Number(item.amount).toFixed(2));
      });

      // 材料费
      ruleForm.moneyMaterials = Number((Number(materials) + salePriceAllCopy).toFixed(2));
    },
    {
      deep: true,
      immediate: true,
    }
);

//监听amount计算总金额
watch(() => dataTable.value.map(v => v.amount), (val) => {
    ruleForm.moneyAll = val.reduce((prev, next) => {
        return Number(prev) + Number(next)
    }, 0)
})

// 净利润   毛利率  利润率
watchEffect(() => {
    // 净利润 = 工单金额 - 成本
    moneyProfit.value = Number((ruleForm.moneyAll - (ruleForm.moneyMaterials + Number(ruleForm.moneyInstall) + ruleForm.moneyCity)).toFixed(2))
    // 毛利率 = 净利润 / 工单金额
    moneyGross.value = isNaN((moneyProfit.value / ruleForm.moneyAll).toFixed(2)) ? 0 : Number((moneyProfit.value / ruleForm.moneyAll).toFixed(2))
    // 利润率 = 净利润 / 工单金额 * 100
    moneyRatio.value = isNaN((moneyProfit.value / ruleForm.moneyAll * 100).toFixed(2)) ? 0 : Number((moneyProfit.value / ruleForm.moneyAll * 100).toFixed(2))
})

// 提交
const costingAddFn = async (params, infoId) => {
    let { code, msg, data } = await costingAdd(params)
    if (code == 200) {
        infoId.costingId = data
        await costingListGetInfo(infoId).then((res) => {
            if (res.code == 200) {
                proxy.$modal.msgSuccess(res.msg);
                setTimeout(() => {
                    router.push('/tickets/newOrders')
                    localStorage.setItem('leimu', JSON.stringify(res.data))
                }, 500)
            }
        })
    }
}

// 修改
const costingListEditFn = async (params) => {
    let { code, msg } = await costingListEdit(params)
    if (code == 200) {
        proxy.$modal.msgSuccess(msg);
        setTimeout(() => {
            emit('goBack')
        }, 500)
    }
}
// 提交
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let tableOrders = dataTable.value.map(v => {
                //     // unit 没定
                return {
                    id: null,                   //  表格ID
                    orderId: null,              //  订单编号
                    businessType: v.businessType,   //  业务类型
                    productId: v.productId,        //  商品ID  存货
                    productionContent: v.productionContent,  //  制作内容
                    width: v.width,             //  宽
                    height: v.height,           //  高
                    quantityPerPiece: v.quantityPerPiece, //  件数
                    totalQuantity: v.totalQuantity,     //  数量  
                    amount: v.amount,            //  销售金额
                    unit: v.unit,            //  单位
                    prepayment: v.prepayment,      //  预收款
                    salePrice: v.salePrice,         // 销售单价

                    salePriceAll: v.salePriceAll,         //  成本金额

                    price: v.price,
                    outsourcingId: v.outsourcingId, //    外协商ID
                    costCategory: v.costCategory,           //  成本类别
                    budgetCost: v.budgetCost,           //  预算成本
                    actualCost: v.actualCost,           //  实际成本
                    materialFee: v.materialFee,           //   材料费
                }
            })
            let params = {
                moneyAll: ruleForm.moneyAll,
                moneyMaterials: ruleForm.moneyMaterials,
                remark: ruleForm.remarks,
                moneyInstall: ruleForm.moneyInstall,
                moneyCity: ruleForm.moneyCity,
                moneyGross: moneyGross.value,
                moneyRatio: moneyRatio.value,
                moneyProfit: moneyProfit.value,
                productionVOS: tableOrders,
            }
            if (!flagAddEdit.value) {
                params.costingId = ruleForm.costingId
                // 修改核算
                costingListEditFn(params)
            } else {
                params.measurementId = ruleForm.id
                let infoId = {
                    costingId: '',
                    measurementId: params.measurementId
                }
                // 提交核算
                costingAddFn(params, infoId)
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}
// 重置 
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
// 返回
const goBack = () => {
    emit('goBack')
}
// 回显核算数据
const echoFn = (flag) => {
    flagAddEdit.value = flag
    if (flag) {

        // 回显测量数据
        ruleForm.id = props.accounting.id
        ruleForm.businessSurveyor = props.accounting.businessSurveyor
        optionModel.value = props.accounting.type

        for (let key in props.accounting) {
            // if (ruleForm[key] == 'frontWidth') {
            // }
            ruleForm[key] = props.accounting[key]
        }
        if (JSON.parse(props.accounting.productionItem)) {
            dataTable.value = JSON.parse(props.accounting.productionItem)
        }

    } else {
        // 回显表格数据
        ruleForm.costingId = props.countAccounting.costingId
        ruleForm.moneyAll = props.countAccounting.moneyAll
        ruleForm.moneyMaterials = props.countAccounting.moneyMaterials
        ruleForm.moneyInstall = props.countAccounting.moneyInstall
        ruleForm.moneyCity = props.countAccounting.moneyCity
        optionModel.value = props.countAccounting.type


        dataTable.value = props.countAccounting.productionVOS




        dataTable.value.forEach(v => {
            v.externalVendorId = v.outsourcingId
        })

        ruleForm.id = props.countAccounting.costingId
        modleListName.forEach(v => {
            for (const key in ruleForm) {
                ruleForm[v] = props.countAccounting.measurement[key]
            }
        })
    }
}
onUnmounted(() => {
    stopWatch();
});
onMounted(() => {

    // 提交核算数据
    if (props.accounting) {
        echoFn(true)
    }
    // 修改核算
    if (props.countAccounting) {
        echoFn(false)
    }

})
</script>

<style scoped lang="scss">
.count {
    background-color: #F7F8FA;

    :deep(.el-form) {
        width: 100%;
        max-width: 100% !important;

        .box {
            padding: 20px;
        }

        .el-input__wrapper {
            background: #F2F3F5;
            box-shadow: none;
            border-radius: 0px;
        }

        .config {
            .el-form-item__content {
                display: flex;
                align-items: center;
                flex-wrap: nowrap;

                .el-input {
                    width: 87%;
                }

                .unit {
                    background-color: #F2F3F5;
                    width: 13%;
                    text-align: center;
                }

                .el-input__wrapper {
                    border-radius: 0px;
                    border-right: 1px solid #dbdbdb;
                }
            }
        }

        .box-header {
            padding: 20px;
            background-color: #fff;

            h4 {
                padding-bottom: 20px;
                font-weight: 550;

                .iconfont {
                    border-radius: 50%;
                    padding: 5px;
                    transition: all .3s;

                    &:hover {
                        background-color: #1947FF;
                        color: #fff;
                    }
                }
            }

            .totalList {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20px;

                .flexRowLable {
                    .el-form-item__content {
                        display: flex;
                        align-items: center;
                        flex-wrap: nowrap;

                        .LeftLable {
                            background-color: #F2F3F5;
                            width: 32%;
                            text-align: center;
                        }

                        .el-input {
                            width: 55%;
                        }

                        .unit {
                            background-color: #F2F3F5;
                            width: 13%;
                            text-align: center;
                        }

                        .el-input__wrapper {
                            background-color: #F2F3F5;
                        }
                    }
                }
            }
        }

        .structuralDiagram {

            background-color: #fff;
            padding: 20px;
            margin-top: 16px;

            .title {
                padding-bottom: 20px;
                display: flex;
                align-items: center;

                h4 {
                    font-weight: 550;
                    margin-right: 10px;
                }

                span {
                    color: #ccc;
                }
            }

            .form-box {
                display: flex;
                align-items: center;
                flex-wrap: wrap;

                .el-form-item {
                    margin-right: 40px;

                    .el-form-item__label-wrap {
                        margin: 0 !important;
                    }

                    .el-input__wrapper {
                        background: #F2F3F5;
                        width: 164px;

                    }

                    .el-form-item__content {
                        width: 100%;

                        .el-input {
                            width: 72%;
                        }

                        .unit {
                            width: 28%;
                        }
                    }
                }
            }
        }

        .optionModel {
            .el-form-item {
                width: 100% !important;
            }

            .el-form-item__content,
            .el-select,
            .el-input {
                width: 100% !important;
            }

            .el-form-item__label-wrap {
                margin: 0 !important;
            }

            .modleimage {
                width: 40%;
                height: 40%;
                margin: 0 auto;
                position: relative;

                .el-image {
                    width: 100%;
                    height: 100%;
                }

                span {
                    position: absolute;
                    font-size: 12px;
                    color: red;
                    font-weight: 550;
                }

                .guding-one-zhengmianW {
                    top: 9%;
                    left: 47%;
                }

                .guding-one-zhengmianH {
                    left: 1%;
                    bottom: 52%;
                }

                .guding-two-fangshuiW {
                    left: 49%;
                    top: 0%;
                }

                .guding-two-fangshuiH {
                    left: 14%;
                    bottom: 78%;
                }

                .guding-two-zuoceW {
                    left: 11%;
                    bottom: 71%;
                }

                .guding-two-zuoceH {
                    left: 6%;
                    bottom: 47%;
                }

                .guding-two-zhengmianW {
                    left: 49%;
                    bottom: 70%;
                }

                .guding-two-zhengmianH {
                    left: 15%;
                    bottom: 49%;
                }

                .guding-two-youceW {
                    left: 87%;
                    bottom: 72%;

                }

                .guding-two-youceH {
                    left: 92%;
                    bottom: 47%;
                }

                .guding-two-xiaceW {
                    left: 49%;
                    bottom: 31%;
                }

                .guding-two-xiaceH {
                    left: 17%;
                    bottom: 20%;
                }


                .guding-three-fangshuiW {
                    left: 50%;
                    bottom: 91%;
                }

                .guding-three-fangshuiH {
                    left: 13%;
                    bottom: 86%;
                }

                .guding-three-zhengmianW {
                    left: 50%;
                    bottom: 82%;
                }

                .guding-three-zhengmianH {
                    left: 14%;
                    bottom: 72%;
                }

                .guding-three-zuoceH {
                    left: 4%;
                    bottom: 72%;
                }

                .guding-three-zuoceW {
                    left: 9%;
                    bottom: 62%;
                }

                .guding-three-youceW {
                    left: 90%;
                    bottom: 62%;
                }

                .guding-three-youceH {
                    left: 94%;
                    bottom: 71%;
                }

                .guding-three-xiadiH {
                    left: 16%;
                    bottom: 58%;
                }

                .guding-three-xiadiW {
                    left: 50%;
                    bottom: 64%;
                }

                .guding-three-menmeiW {
                    left: 50%;
                    bottom: 48%;
                }

                .guding-three-menmeiH {
                    left: 18%;
                    bottom: 53%;
                }

                .guding-three-baozhuH {
                    left: 18%;
                    bottom: 30%;
                }

                .guding-three-baozhuW {
                    left: 22%;
                    bottom: 8%;
                }

                .guding-three-baozhu2W {
                    left: 77%;
                    bottom: 8%;
                }

                .guding-three-baozhu2H {
                    left: 82%;
                    bottom: 29%;
                }

                // 多选样式
                .duoxuan-four-fangshuiW {
                    left: 48%;
                    bottom: 89%;
                }

                .duoxuan-four-fangshuiH {
                    left: 10%;
                    bottom: 85%;
                }

                .duoxuan-four-zhengmianW {
                    left: 48%;
                    bottom: 76%;
                }

                .duoxuan-four-zhengmianH {
                    left: 18%;
                    bottom: 71%;
                }

                .duoxuan-four-zuoceH {
                    left: 2%;
                    bottom: 71%;
                }

                .duoxuan-four-zuoceW {
                    left: 8%;
                    bottom: 60%;
                }

                .duoxuan-four-youceW {
                    left: 87%;
                    bottom: 60%;
                }

                .duoxuan-four-youceH {
                    left: 94%;
                    bottom: 70%;
                }

                .duoxuan-four-xiadiH {
                    left: 14%;
                    bottom: 56%;
                }

                .duoxuan-four-xiadiW {
                    left: 43%;
                    bottom: 59%;
                }

                .duoxuan-four-menmeiW {
                    left: 49%;
                    bottom: 47%;
                }

                .duoxuan-four-menmeiH {
                    left: 16%;
                    bottom: 52%;
                }

                .duoxuan-four-baozhuH {
                    left: 15%;
                    bottom: 29%;
                }

                .duoxuan-four-baozhuW {
                    left: 21%;
                    bottom: 5%;
                }

                .duoxuan-four-baozhu2W {
                    left: 75%;
                    bottom: 6%;
                }

                .duoxuan-four-baozhu2H {
                    left: 81%;
                    bottom: 27%;
                }

                // 多选五
                .duoxuan-five-fangshuiW {
                    left: 50%;
                    bottom: 91%;
                }

                .duoxuan-five-fangshuiH {
                    left: 12%;
                    bottom: 85%;
                }

                .duoxuan-five-zhengmianW {
                    left: 48%;
                    bottom: 76%;
                }

                .duoxuan-five-zhengmianH {
                    left: 19%;
                    bottom: 71%;
                }

                .duoxuan-five-zuoceH {
                    left: 4%;
                    bottom: 71%;
                }

                .duoxuan-five-zuoceW {
                    left: 10%;
                    bottom: 61%;
                }

                .duoxuan-five-youceW {
                    left: 89%;
                    bottom: 61%;
                }

                .duoxuan-five-youceH {
                    left: 95%;
                    bottom: 71%;
                }

                .duoxuan-five-xiadiH {
                    left: 16%;
                    bottom: 56%;

                }

                .duoxuan-five-xiadiW {
                    left: 43%;
                    bottom: 59%;
                }

                .duoxuan-five-menmeiW {
                    left: 57%;
                    bottom: 52%;
                }

                .duoxuan-five-menmeiH {
                    left: 18%;
                    bottom: 52%;
                }

                .duoxuan-five-baozhuH {
                    left: 15%;
                    bottom: 29%;
                }

                .duoxuan-five-baozhuW {
                    left: 21%;
                    bottom: 6%;
                }

                .duoxuan-five-baozhu3W {
                    left: 77%;
                    bottom: 6%;
                }

                .duoxuan-five-baozhu3H {
                    left: 83%;
                    bottom: 29%;
                }

                .duoxuan-five-baozhu2H {
                    left: 57%;
                    bottom: 29%;
                }

                .duoxuan-five-baozhu2W {
                    left: 51%;
                    bottom: 7%;
                }

                .duoxuan-five-chuchuangT-W {
                    left: 41%;
                    bottom: 47%;
                }

                .duoxuan-five-chuchuangT-H {
                    left: 27%;
                    bottom: 47%;
                }

                .duoxuan-five-chuchuangL-W {
                    left: 26%;
                    bottom: 42%;
                }

                .duoxuan-five-chuchuangL-H {
                    left: 25%;
                    bottom: 31%;
                }

                .duoxuan-five-chuchuangR-W {
                    left: 47%;
                    bottom: 42%;
                }

                .duoxuan-five-chuchuangR-H {
                    left: 47%;
                    bottom: 31%;
                }

                .duoxuan-five-chuchuangboli-W {
                    left: 36%;
                    bottom: 19%;
                }

                .duoxuan-five-chuchuangboli-H {
                    left: 41%;
                    bottom: 31%;
                }

                .duoxuan-five-chuchuangb-W {
                    left: 36%;
                    bottom: 12%;
                }

                .duoxuan-five-chuchuangb-H {
                    left: 27%;
                    bottom: 13%;
                }

                // 多选-6
                .duoxuan-six-fangshuiW {
                    left: 50%;
                    bottom: 91%;
                }

                .duoxuan-six-fangshuiH {
                    left: 12%;
                    bottom: 86%;
                }

                .duoxuan-six-zuoceW {
                    left: 9%;
                    bottom: 63%;
                }

                .duoxuan-six-zuoceH {
                    left: 3%;
                    bottom: 73%;
                }

                .duoxuan-six-yuoceW {
                    left: 90%;
                    bottom: 63%;
                }

                .duoxuan-six-yuoceH {
                    left: 96%;
                    bottom: 73%;
                }

                .duoxuan-six-zhengmianW {
                    left: 49%;
                    bottom: 78%;
                }

                .duoxuan-six-zhengmianH {
                    left: 19%;
                    bottom: 73%;
                }

                .duoxuan-six-xiadiW {
                    left: 45%;
                    bottom: 60%;
                }

                .duoxuan-six-xiadiH {
                    left: 13%;
                    bottom: 59%;
                }

                .duoxuan-six-menmeiW {
                    left: 36%;
                    bottom: 54%;
                }

                .duoxuan-six-menmeiH {
                    left: 15%;
                    bottom: 54%;
                }

                .duoxuan-six-baozhu1W {
                    left: 19%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu1H {
                    left: 13%;
                    bottom: 30%;
                }

                .duoxuan-six-baozhu2W {
                    left: 31%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu2H {
                    left: 26%;
                    bottom: 30%;
                }

                .duoxuan-six-baozhu3W {
                    left: 42%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu3H {
                    left: 37%;
                    bottom: 30%;
                }

                .duoxuan-six-baozhu4W {
                    left: 54%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu4H {
                    left: 49%;
                    bottom: 30%;
                }

                .duoxuan-six-baozhu5W {
                    left: 68%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu5H {
                    left: 63%;
                    bottom: 30%;
                }

                .duoxuan-six-baozhu6W {
                    left: 79%;
                    bottom: 6%;
                }

                .duoxuan-six-baozhu6H {
                    left: 83%;
                    bottom: 30%;
                }
            }
        }


        .countResults {
            padding: 20px;
            background-color: #fff;
            margin-top: 20px;

            h4 {
                margin-bottom: 20px;
                font-weight: 550;
            }

            .results {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 30%;

                .list {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 45px;

                    .lable {
                        color: #4E5969;
                        font-size: 12px;
                    }

                    .value {
                        font-weight: 550;

                        .icon-shangsheng {
                            color: red;
                        }

                        .icon-xiajiang {
                            color: #23D96E;
                        }

                        span {
                            color: red;
                        }
                    }
                }
            }
        }

        .btn-box {
            margin-top: 20px;
            background-color: #fff;
            height: 90px;


            .el-form-item__content {
                text-align: right;
                flex: none;
                padding-right: 40px;
            }
        }
    }
}
</style>